@charset "UTF-8";

/*重置css*/

body, div, ul, li, ol, p, a, span, i, strong, select, option, img, input, h1, h2, h3, h4, h5, h6 {
  margin: 0px;
  padding: 0px;
}

input {
  outline: none;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #252525;
}

img {
  border: none;
  outline: none;
}

button {
  border: none;
}

html, body {
  width: 100%;
  height: 100%;
}

/*清除浮动*/

.clearfix {
  &:after {
    content: '';
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
  }

  *zoom: 1;
}

/*底部p*/

.bottomP {
  padding-bottom: 4px;
  font-size: 12px;
  text-align: center;
  color: #333;
  opacity: 0.5;
  filter: alpha(opacity = 50);
  margin-bottom: 5px;
}

/*跳动beats*/
@keyframes beats {
  0% {
    top: 330px;
  }

  50% {
    top: 340px;
  }

  100% {
    top: 330px;
  }
}

@-webkit-keyframes beats {
  0% {
    top: 330px;
  }

  50% {
    top: 340px;
  }

  100% {
    top: 330px;
  }
}

@-moz-keyframes beats {
  0% {
    top: 330px;
  }

  50% {
    top: 340px;
  }

  100% {
    top: 330px;
  }
}

@-o-keyframes beats {
  0% {
    top: 330px;
  }

  50% {
    top: 340px;
  }

  100% {
    top: 330px;
  }
}

/*旋转rotate*/
@keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0, 0);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@-webkit-keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0, 0);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@-o-keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0, 0);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@-moz-keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0, 0);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/*矩形流动*/
@keyframes clipMe {
  0% {
    clip: rect(0px, 232px, 2px, 0px);
  }

  25% {
    clip: rect(0px, 2px, 40px, 0px);
  }

  50% {
    clip: rect(38px, 232px, 40px, 0px);
  }

  75% {
    clip: rect(0px, 232px, 40px, 230px);
  }

  100% {
    clip: rect(0px, 232px, 2px, 0px);
  }
}

body {
  /*font-family: "微软雅黑","Microsoft YaHei";
  font-size: 14px;*/
  font-family: Helvetica, sans-serif;
  background-color: #efefef;
  color: #252525;
  width: 100%;
  height: 100%;
}

/*清除浮动*/

.clearfix {
  &:after {
    content: '';
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
  }

  *zoom: 1;
}

/*zhuanti --begin*/

.gzl-bg {
  width: 100%;
  height: 100%;
}

/*li公共样式*/
/*common*/

.common-tab {
  width: 1000px;
  margin: auto;

  .choose-tit {
    color: #fff;
  }

  ul {
    width: 1000px;
    margin-top: 30px;
    display: none;

    li {
      width: 310px;
      height: 375px;
      float: left;
      margin-left: 20px;
      position: relative;
      margin-bottom: 30px;
      background-color: #fff;
      background: url(../images/li-bg.png) no-repeat top center;
      background-size: 100%;
      position: relative;
      top: 0px;

      a {
        display: inline-block;
        width: 100%;
        height: 100%;
        vertical-align: bottom;

        .common-img {
          position: relative;
          width: 99%;
          height: 210px;
          margin: 0.5%;
          overflow: hidden;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          -o-border-radius: 10px;
          border-radius: 10px;

          img {
            width: 100%;
            height: 210px;
          }

          span {
            position: absolute;
            bottom: 0px;
            width: 96%;
            line-height: 25px;
            padding: 0 2%;
            font-size: 14px;
            color: #fff;
            text-indent: 2px;
            background-color: #000;
            opacity: 0.7;
            filter: alpha(opacity = 70);
          }
        }

        h4, p {
          width: 96%;
          margin: 5px 2%;
          overflow: hidden;
        }

        h4 {
          height: 50px;
          line-height: 25px;
          font-size: 18px;
          font-weight: bold;
        }

        p {
          overflow: hidden;
        }

        .common-date {
          height: 25px;
          line-height: 25px;
          font-size: 14px;

          i {
            display: inline-block;
            width: 21px;
            height: 21px;
            margin-right: 5px;
            vertical-align: middle;
            background: url(../images/date.png) no-repeat left center;
            background-size: 100%;
          }
        }

        .common-real-price {
          font-size: 15px;
          color: #A5A5A5;
          text-decoration: line-through;
          height: 20px;
          line-height: 20px;
        }

        .common-book-box {
          margin: 0px;
          width: 96%;
          height: 40px;
          margin-left: 2%;
          color: #fff;

          .common-price {
            float: left;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-weight: bold;
            width: 55%;
            text-indent: 4px;
            color: #DF0A40;

            i {
              font-size: 24px;
            }
          }
        }

        .common-des {
          display: inline-block;

          /*background-color: #0759ff;*/
          padding: 10px 25px;
          position: absolute;
          left: 4px;
          top: -18px;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          overflow: hidden;
          background: url(../images/lib.png) no-repeat top center;

          /*background-size: 100%;*/
        }
      }
    }
  }

  .choose-ul {
    display: block;
  }
}

/*底部p*/

.bottomP {
  padding-bottom: 4px;
  font-size: 12px;
  text-align: center;
  color: #333;
  opacity: 0.5;
  filter: alpha(opacity = 50);
  margin-bottom: 5px;
}

/*跳动beats*/
@keyframes beats {
  0% {
    top: 330px;
  }

  50% {
    top: 340px;
  }

  100% {
    top: 330px;
  }
}

@-webkit-keyframes beats {
  0% {
    top: 330px;
  }

  50% {
    top: 340px;
  }

  100% {
    top: 330px;
  }
}

@-moz-keyframes beats {
  0% {
    top: 330px;
  }

  50% {
    top: 340px;
  }

  100% {
    top: 330px;
  }
}

@-o-keyframes beats {
  0% {
    top: 330px;
  }

  50% {
    top: 340px;
  }

  100% {
    top: 330px;
  }
}

/*旋转rotate*/
@keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0, 0);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@-webkit-keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0, 0);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@-o-keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0, 0);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@-moz-keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0, 0);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/*矩形流动*/
@keyframes clipMe {
  0% {
    clip: rect(0px, 232px, 2px, 0px);
  }

  25% {
    clip: rect(0px, 2px, 40px, 0px);
  }

  50% {
    clip: rect(38px, 232px, 40px, 0px);
  }

  75% {
    clip: rect(0px, 232px, 40px, 230px);
  }

  100% {
    clip: rect(0px, 232px, 2px, 0px);
  }
}

/*# sourceMappingURL=index.css.map */
